
<!-- 如何将选择的文件转为json数据
1.将 xlsx.full.min.js 导入到页面中；
2.然后通过 FileReader 对象读取文件利用 js-xlsx 转成 json 数据

将得到的json数据渲染到页面上
1.由于选择的Excel文件属于表格，渲染时选用 table tr td 等标签；
2.获取表头数据，得到表格列数和列名；
3.通过 for 循环创建 tr 和 td，并给 td 标签添加上列名；
4.对数据对象进行遍历，通过数据对象的键名和 td 标签的列名给对应的 td 添加内容；
5.为了使空白的表格可以编辑，在创建 td 时通过 $.html 的方法添加 input 标签，在给 td 添加内容时同样使用 $.html 进行，把不需要 input 标签的 td 的 html内容重写。 -->

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>上传文件-自动预览</title>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
  <script src="./js/xlsx.full.min.js"></script>
  <script src="./js/jquery.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      border: black 1px solid;
    }
 
 
    th {
      text-align: center;
      padding: 20px 0;
      border: black 1px solid;
    }
 
 
    td {
      padding: 5px 10px;
      border: black 1px solid;
    }
 
 
    input {
      border: none;
    }
 
  </style>
</head>
 
<body>
  <input type="file" onchange="importf(this)" />
 
  <table id="demo">
  </table>
  <script>
    /*
    FileReader共有4种读取方法：
    1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
    2.readAsBinaryString(file)：将文件读取为二进制字符串
    3.readAsDataURL(file)：将文件读取为Data URL
    4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
    */
    var wb;//读取完成的数据
    var rABS = false; //是否将文件读取为二进制字符串
 
    function importf(obj) {//导入
      if (!obj.files) {
        return;
      }
      var f = obj.files[0];
      var reader = new FileReader();
      reader.onload = function (e) {
        // console.log(e.target.result);
        if (rABS) {
          wb = XLSX.read(btoa(fixdata(e.target.result)), {//手动转化
            type: 'base64'
          });
        } else {
          wb = XLSX.read(e.target.result, {
            type: 'binary'
          });
        }
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据
        var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log(data);
        var keyAry = [];
        // 遍历json对象，获取每一列的键名
        for (var key in data[1]) {
          keyAry.push(key);
        }
        console.log(keyAry)
        // 清除上次渲染的表格
        $("#demo").empty();
        // 设置表格头
        $(`<thead><tr class='thead-tr'></tr></thead>`).appendTo($("#demo"))
        keyAry.forEach(e => {
          $(`<th>${e}</th>`).appendTo($(".thead-tr"));
        })
 
        for (var d of data) {
          // 通过循环,每有一条数据添加一行表格
          var tr = $("<tr></tr>");
          for (var n = 0; n < keyAry.length; n++) {
            // 根据keyAry数组的长度,创建每一行表格中的td
            $("<td></td>").html("<input>").addClass(keyAry[n]).appendTo(tr);
          }
          // 遍历对象,根据键名找到是哪一列的数据,给对应的td添加内容
          for (k in d) {
            // (tr[0].children[keyAry.indexOf(k)])
            $(tr[0].children[keyAry.indexOf(k)]).html(d[k]);
          }
          tr.appendTo($("#demo"));
        }
      }
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    }
 
    function fixdata(data) { //文件流转BinaryStrings
      var o = "",
        l = 0,
        w = 10240;
      jsArry = [];
      for (; l < data.byteLength / w; ++l) jsArry.push(String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))));
      return jsArry;
    }
 
  </script>
</body>
 
</html>